<template>
  <div class="fillcontain" v-loading="dataListLoading">
    <bt-col-header title="环境信息"></bt-col-header>
    <div class="page-content">
      <el-form :model="dataForm" @keyup.enter.native="getDataList()" class="" label-width="80px">
        <el-form-item label="环境编码" class="col-md-4">
          <el-input v-model="dataForm.environmentCode" placeholder="环境编码" clearable></el-input>
        </el-form-item>
        <el-form-item label="环境名称" class="col-md-4">
          <el-input v-model="dataForm.environmentName" placeholder="环境名称" clearable></el-input>
        </el-form-item>
        <!-- <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="getDataList()"></el-button>
            <el-button icon="el-icon-refresh" @click="resetData()"></el-button>
          </el-form-item-->
        <div class="row contain-padding">
          <div class="col-md-12 text-center mt-2">
            <rich-button :plain="true" type="info" shape="capsule" icon='search' @click="getDataList()">查询</rich-button>
            <rich-button shape="capsule" icon='quit' @click="resetData()">重置</rich-button>
          </div>
        </div>
      </el-form>

      <div class="">
        <!-- 操作按钮 -->
        <!-- <el-row>
          <el-col :span="24" class="pb15 pt5">
            <el-button  type="danger" size="mini" style="margin-left: 10px;" plain @click="addOrUpdateHandle()">新增</el-button>
          </el-col>
        </el-row> -->
        <div class="btn-padding left">
          <el-button :plain="true" type="info" icon="circle-plus" @click="addOrUpdateHandle()">新增</el-button>
        </div>

        <!-- 查询结果列表 -->
        <div class="table_container">
          <!-- 列表 -->
          <el-table :data="dataList" border style="width: 100%; ">
            <el-table-column type="index" header-align="center" width="50" label="序号">
            </el-table-column>
            <el-table-column prop="environmentCode" header-align="center" align="center" label="环境编码">
            </el-table-column>
            <el-table-column prop="environmentName" header-align="center" align="center" label="环境名称">
            </el-table-column>

            <el-table-column prop="environmentUrl" header-align="center" align="center" label="URL">
            </el-table-column>

            <el-table-column prop="isEffect" header-align="center" align="center" label="状态">
              <template slot-scope="scope">
                {{scope.row.isEffect | isEffectFilter}}
              </template>
            </el-table-column>

            <el-table-column header-align="center" align="center" label="操作">
              <template slot-scope="scope">
                <el-button v-if="isAuth('entity:view')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
                <el-button v-if="isAuth('entity:view') && scope.row.isEffect==='1'" type="text" size="small" @click="edit(scope.row)">禁用</el-button>
                <el-button v-if="isAuth('entity:view') && scope.row.isEffect==='0'" type="text" size="small" @click="edit(scope.row)">启用</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <el-pagination class="float-right mt-2" @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="page.pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize" :total="page.totalPage" layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>
    </div>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>

  </div>
</template>

<script>
import { pageData, saveData } from '@/api/baseConfig/environment'
import AddOrUpdate from './add-or-update'

export default {
  data() {
    return {
      dataForm: {
        environmentCode: '',
        environmentName: ''
      },
      dataList: [],
      dataListLoading: false,
      addOrUpdateVisible: false,
      page: {
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0
      }
    }
  },
  components: {
    AddOrUpdate
  },
  activated() {
    this.getDataList()
  },
  methods: {
    edit(row) {
      let data = row
      if (row.isEffect === '0') {
        data.isEffect = '1'
      } else {
        data.isEffect = '0'
      }
      this.$store.dispatch('loading/CHANGE_LOADING', true)
      saveData(JSON.stringify(data)).then(res => {
        this.$store.dispatch('loading/CHANGE_LOADING', false)
        this.getDataList()
      }).catch(err => {
        this.$store.dispatch('loading/CHANGE_LOADING', false)
      })
    },
    resetData() {
      this.dataForm.environmentCode = ''
      this.dataForm.environmentName = ''
    },
    // 每页数
    sizeChangeHandle(val) {
      this.page.pageSize = val
      this.page.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.page.pageIndex = val
      this.getDataList()
    },
    // 获取数据列表
    getDataList() {
      this.$store.dispatch('loading/CHANGE_LOADING', true)
      let params = {
        pageNumber: this.page.pageIndex,
        pageSize: this.page.pageSize,
        environmentCode: this.dataForm.environmentCode,
        environmentName: this.dataForm.environmentName
      }
      pageData(params).then(res => {
        this.$store.dispatch('loading/CHANGE_LOADING', false)
        this.dataList = res.data.data.list
        this.page.totalPage = res.data.data.totalCount
      }).catch(err => {
        this.$store.dispatch('loading/CHANGE_LOADING', false)
      })
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },

  },
  filters: {

    isEffectFilter: function (value) {
      let label = ''
      if (value === '0') {
        label = '失效'
      } else if (value === '1') {
        label = "有效"
      }
      return label
    }
  }

}
</script>
<style>
body .el-table th.gutter {
  display: table-cell !important;
}
</style>
